<template>
    <div>
        <h1>登录</h1>
        用户名：<input type="text" v-model="user.name"><br/>
        密码：<input type="password" v-model="user.password"><br/>
        <button @click="login()">登录</button>
    </div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
    methods:{
        login(){
            // 实现登录 zeng8 zmm123
            // axios({
            //     url:"http://dida100.com:8888/api/login",//请求地址
            //     method:"POST", //请求方法
            //     data:this.user,//请求体(你发给后端的数据：用户名和密码)
            //     headers:{      //请求头
            //         "Content-Type":"application/json" //请求的类型
            //     }
            // })
            // axios.post(url,data,config) 
            // post请求默认的header.Content-Type 就是appplication/json
            // axios.post("http://dida100.com:8888/api/login",this.user,{headers:{"Content-Type":"application/json"}})
            axios.post("http://dida100.com:8888/api/login",this.user)
            .then(res=>{
                if(res.data.code===200){
                    // 登录成功提示
                    alert(res.data.msg)
                    // 存储token
                    localStorage.setItem("token",res.data.token);
                    // 用户信息存储,JSON.stringify把对象转换为字符串  JSON.parse() 把字符串转换为对象
                    localStorage.setItem("user",JSON.stringify(res.data.user));
                     // 登录成功获取购物车
                     this.$store.dispatch("getCart")
                    // 跳转到首页
                    this.$router.replace("/")
                   

                }else{
                    // 失败提示
                    alert(res.data.msg);
                }
            })
            .catch(err=>console.error(err,"网络错误"))
        }
    },
    data(){
        return {
            user:{
                name:"",
                password:""
            }
        }
    }
}
</script>